.ChatRoomDetailed {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;

  .background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: no-repeat center center;
    background-size: cover;
    filter: blur(3px);
  }

  .head {
    .name {
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 255, 255, 0.5);
      > span {
        color: var(--text-color-white);
      }
    }

    svg {
      color: var(--white);
    }
  }

  .content {
    position: relative;
    flex: 1;
    //唱片
    .record-player {
      margin: 0 auto;
    }


    //用户 牌位 ul
    .user-memorial-tablet {
      position: absolute;
      padding: 1rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 1rem;
      z-index: 2;


      > li {
        width: 100%;
        position: relative;

        .user-div {
          > p {
            font-size: 0.8rem;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(3px);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            color: var(--text-color-white);
            border-radius: 0.2rem;
          }

          .userHead {
            width: 100%;
          }
        }

        .user-message-pop-up {
          position: absolute;
          top: -4rem;
          height: 100%;
          width: 100%;
          filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
          display: flex;
          justify-content: center;

          > .p-div {
            position: absolute;
            display: flex;
            justify-content: center;

            > p {
              display: inline-block;
              border-radius: 0.5rem;
              background-color: white;
              padding: 0.5rem;
            }
          }

          > .pop-up-icon {
            position: absolute;
            width: 1.5rem;
            bottom: calc(115% - 1rem);
            left: calc(50% - 0.8rem);
            color: white;
            transform: rotate(90deg);

            > svg {
              width: 100%;
              height: 100%;
            }
          }

        }


      }
    }

    .drawer-overlay-open {
      backdrop-filter: blur(0px);
    }

    //歌词
    .lyric-box {
      position: absolute;
      width: 100%;
      z-index: 1;
      height: calc(100% - 50vw - 12cqw - 3rem);
      bottom: 3rem;
      overflow: hidden;

      .lyric {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 20%;
        overflow: initial;
      }
    }


  }


  //按钮
  .userPageFlowBtnDiv {
    position: absolute;
    right: -0.5rem;
    bottom: 5rem;
    padding: 1rem;
    width: 7rem;
    z-index: 2;

    > button {
      margin-bottom: 0.5rem;
    }
  }

  .message-input {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: transparent;
    backdrop-filter: blur(5px);
  }

}
